<template>
    <div>
        <pagetitle type="2"></pagetitle>
        <el-card class="box-card">
            <div class="teamTopTip">
                <!-- <el-icon color="#252B3A" size="16px"><Warning /></el-icon> -->
                <div class="tipbox">
                    <div class="tiptitle">筛选条件</div>
                    <el-form label-position="right" label-width="180px" :model="pageData">
                        <el-form-item label="标准状态：">
                            <div class="tipitemBox">
                                <div class="tipitemloeft">
                                    <el-button type="primary" link>全部（40231）</el-button>
                                    <el-button type="primary" link>现行有效（40231）</el-button>
                                    <el-button type="primary" link>即将实施（697）</el-button>
                                    <el-button type="primary" link>已经废止（45）</el-button>
                                </div>
                                <el-button type="primary" plain> <el-checkbox v-model="checked" label="" size="large">多选</el-checkbox> </el-button>
                            </div>
                        </el-form-item>
                        <el-form-item label="中国标准分类号（CCS）：">
                            <div class="tipitemBox">
                                <div class="tipitemloeft">
                                    <el-button type="primary" link>全部（40231）</el-button>
                                    <el-button type="primary" link>综合标准(367)</el-button>
                                    <el-button type="primary" link>农业、林业(1908)</el-button>
                                    <el-button type="primary" link>矿业标准(4180)</el-button>
                                    <el-button type="primary" link>化工标准(6717)</el-button>
                                    <el-button type="primary" link>电工标准(6717)</el-button>
                                    <el-button type="primary" link>通信、广播(6717)</el-button>
                                    <el-button type="primary" link>建材标准(6717)</el-button>
                                </div>
                                <el-button type="primary" plain> <el-checkbox v-model="checked" label="" size="large">多选</el-checkbox> </el-button>
                            </div>
                        </el-form-item>
                        <el-form-item label="国际标准分类号（ICS）：">
                            <div class="tipitemBox">
                                <div class="tipitemloeft">
                                    <el-button type="primary" link>全部（40231）</el-button>
                                    <el-button type="primary" link>综合标准(367)</el-button>
                                    <el-button type="primary" link>农业、林业(1908)</el-button>
                                    <el-button type="primary" link>矿业标准(4180)</el-button>
                                    <el-button type="primary" link>化工标准(6717)</el-button>
                                    <el-button type="primary" link>电工标准(6717)</el-button>
                                    <el-button type="primary" link>通信、广播(6717)</el-button>
                                    <el-button type="primary" link>建材标准(6717)</el-button>
                                </div>
                                <el-button type="primary" plain>
                                    <el-icon><Plus /></el-icon>&nbsp; 更多
                                </el-button>
                            </div>
                        </el-form-item>
                    </el-form>
                </div>
            </div>
        </el-card>
        <el-card class="teamBox">
            <div class="teamtop">
                <div class="topitems">
                    <div>
                        <div>
                            <el-input class="searchInput" v-model="queryData.companyName" placeholder="请输入搜索得内容" suffix-icon="Search" />
                            <el-button type="primary" @click="getCompanyList(0)" plain>搜索</el-button>
                        </div>
                        <div class="searchTip">说明：搜索范围包括标准号、标准名称等</div>
                    </div>
                </div>
                <div class="topitems">
                    <el-button type="primary" @click="topages('/standard/adddatabase?type=1')" plain>新增数据库</el-button>
                </div>
            </div>
            <el-table :data="[]" class="tableheader" border style="width: 100%">
                <el-table-column prop="date" label="序号" width="55">
                    <template #default="scope">
                        {{ scope.$index + 1 }}
                    </template>
                </el-table-column>
                <el-table-column prop="createTime" label="标准号" />
                <el-table-column prop="companyName" label="分部编号" />
                <el-table-column prop="createUserName" label="标准名称" />
                <el-table-column prop="companyNature" label="分部名称" />
                <el-table-column prop="address" label="版次">
                    <template #default="scope"> 暂无数据 </template>
                </el-table-column>
                <el-table-column prop="registeredAddress" label="发布单位" />
                <el-table-column prop="address" label="发布日期">
                    <template #default="scope"> 暂无数据 </template>
                </el-table-column>
                <el-table-column prop="address" label="操作" width="80">
                    <template #default="scope">
                        <el-button link type="primary" size="small" @click="topages(`/team/myteams/teammsg?id=${scope.row.id}&type=1`)">查看详情</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <pagination :totalNum="pageData.total" @paginaClick="paginaClick"></pagination>
        </el-card>
    </div>
</template>
<script lang="ts" setup>
import { ref, reactive } from "vue";
import { useRouter } from "vue-router";
// import { companyList } from "@/api/team";
const router = useRouter();
const pageData: any = reactive({
    records: [],
    total: 0,
});
const queryData = reactive({
    companyName: "",
    checkState: "",
    startTime: "",
    endTime: "",
    page: 1,
    size: 10,
});
const input: any = [];
const checked: boolean = false;
const getCompanyList = (type: number) => {
    // type = 0 时为条件查询
    if (type) {
        queryData.companyName = "";
        queryData.checkState = "";
        queryData.startTime = "";
        queryData.endTime = "";
        queryData.page = 1;
    }
    // companyList(queryData).then((res: any) => {
    //     if (res.code == 200) {
    //         pageData.records = res.data.records;
    //         pageData.total = res.data.total;
    //     }
    // });
};

getCompanyList(1);
// 分页
const paginaClick = (val: number) => {
    queryData.page = val;
    getCompanyList(0);
};
const topages = (url: string) => {
    router.push(url);
};
</script>
<style lang="scss" scoped>
.teamTopTip {
    // display: flex;
    // justify-content: flex-start;
    // align-items: flex-start;
    width: 100%;
    .tipbox {
        // margin-left: 10px;
        .tiptitle {
            font-size: 14px;
            font-weight: bold;
            color: #252b3a;
            margin-bottom: 20px;
        }
        .tipitemBox {
            display: flex;
            justify-content: space-between;
            align-items: center;
            width: 100%;
            .tipitemloeft {
                display: flex;
                justify-content: flex-start;
                align-items: center;
                width: 100%;
                flex-wrap: wrap;
            }
        }
    }
}
.teamBox {
    margin-top: 20px;
    // padding: 30px 0;
    background-color: #ffffff;
    .teamtop {
        display: flex;
        justify-content: space-between;
        align-items: center;
        .topitems {
            display: flex;
            justify-content: flex-start;
            align-items: center;
        }
        .searchInput {
            width: 400px;
            margin-right: 15px;
        }
        .searchBtn {
            width: 80px;
            height: 32px;
            background: #f1f1f1;
            border-radius: 4px;
            text-align: center;
            line-height: 32px;
            font-size: 14px;
            color: #333333;
            cursor: pointer;
        }
        .rightBtn {
            height: 32px;
            background: #f1f1f1;
            border-radius: 4px;
            text-align: center;
            line-height: 32px;
            font-size: 14px;
            color: #333333;
            cursor: pointer;
            width: 100px;
            margin-left: 10px;
        }
    }
    .searchTip {
        font-size: 12px;
        color: #999999;
        margin-top: 10px;
        margin-bottom: 30px;
    }
}
.tableTip {
    font-size: 12px;
    color: #999999;
    margin-top: 10px;
}
</style>
